<%
	# set the list of square letters
	square_letters = [ "a","b","c","d","e","f","g","h" ]

	# set the inital background color
	@square_color = "white"

	# create the table to hold the board
	#   46x46 pieces, 8 border, 8x8 board with border
	#   
	#   46 + 8 = 54 * 8 = 432 + 20 (for border) = 452
%>
<div id='board'>
<table>
<tr>
<td>
	<table width='452' height='452' border='2'>

<%
	# for each row on the board
	0.upto(8) do |row|
  		# start the table row
%>
  		<tr align='center'>
<%  
		# if we are still creating int_rows on the board
		if row < 8 then
			0.upto(8) do |col|
				# if we are not in the first column
				if col > 0 then
					# create the square and putting a blank image in there with an ID equal to the algebraic name for the square.
					@board_square = "#{square_letters[col-1]}#{8-row}"
%>
					<%= render :partial => "board_square" %>
<%
					# swap the colors
					if @square_color == "#CCCCCC"
						@square_color = "white"
					else
						@square_color = "#CCCCCC"
        			end
        
				# if we are in the first column, then simply display the row number
				else
%>
					<%= "<td width='54' height='54'>#{8-row}</td>" %>
<%				
				end
			end
		 else
  			# add the row containing the square letters across the foot of the board
			0.upto(8) do |col|
				if col == 0 then
-%>
					<%= "<td width='56' height='56'>&nbsp;</td>" %>
				<% else -%>
					<%= "<td width='56' height='56'>#{square_letters[col-1].upcase}</td>" %>
<%
      			end
    		end
  		end
  
		# swap the colours again to maintain the layout
		if @square_color == "#CCCCCC" then
			@square_color = "white"
		else
			@square_color = "#CCCCCC"
		end

		# end the table row
-%>
		</tr>
	<% end -%>
</table>
</td>
<td>
	<% if @flash[:error] %>
		<h2>Error: <%= @flash[:error] %></h2>
	<% end %>
</td>
</tr>
</table>

<script language="javascript">
<% (1..8).to_a.reverse.each do |row| %>
	<% ("a".."h").each do |file| %>
		<% value = @position.send("#{file}#{row}") %>
		<%= "document.#{file}#{row}.src='/images/#{get_image(value)}';" %>
		<% if !value.empty? -%>
			new Draggable( 
				<%= "'#{file}#{row}'" %>,
				{revert:false}
				);
			<%= "$('#{file}#{row}').origin = $('board_square_#{file}#{row}');" %>
		<% end -%>
	<% end %>
<% end %>
</script>

<%= render :partial => 'arrows' %>

</div>
